.taskbar {
  .taskbar-bg-layer-1 {
    opacity: 0.3;
    filter: saturate(0);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='10' numOctaves='3' stitchTiles='stitch '/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-size: cover;
    border-radius: 15px;
  }

  .taskbar-bg-layer-2 {
    opacity: 0.8;
    background-color: var(--color-gray-100);
    border-radius: 15px;
  }

  &.temporal-only {
    --empty-rule: "delete me on use";
  }
}

.weg-separator {
  .horizontal & {
    &.weg-separator-1 {
      border-left: 1px solid var(--color-gray-400);
    }
    &.weg-separator-2 {
      border-right: 1px solid var(--color-gray-400);
    }
  }

  .vertical & {
    &.weg-separator-1 {
      border-top: 1px solid var(--color-gray-400);
    }
    &.weg-separator-2 {
      border-bottom: 1px solid var(--color-gray-400);
    }
  }
}

.weg-empty-state-label {
  white-space: nowrap;
  width: min-content;
  line-height: var(--config-item-size);
  vertical-align: middle;
  font-style: italic;
  color: var(--color-gray-400);
  margin: 0 calc(var(--config-padding) * 2);
}

/* This will act like a hitbox for items */
.weg-item::before {
  content: "";
  position: absolute;
  /* border: solid 1px red; */
}

.vertical .weg-item::before {
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% + var(--config-padding) + var(--config-margin));
  height: calc(100% + var(--config-space-between-items));
}

.horizontal .weg-item::before {
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + var(--config-space-between-items));
  height: calc(100% + var(--config-padding) + var(--config-margin));
}

.bottom .weg-item::before {
  top: 0;
}

.top .weg-item::before {
  bottom: 0;
}

.left .weg-item::before {
  right: 0;
}

.right .weg-item::before {
  left: 0;
}

.weg-item-drag-container:not(.dragging) {
  --item-size-diff: calc(var(--config-item-zoom-size) - var(--config-item-size));

  &:has(+ .weg-item-drag-container + .weg-item-drag-container:hover) .weg-item {
    width: calc(var(--config-item-zoom-size) - (var(--item-size-diff) * 0.7));
    height: calc(var(--config-item-zoom-size) - (var(--item-size-diff) * 0.7));
  }

  &:has(+ .weg-item-drag-container:hover) .weg-item {
    width: calc(var(--config-item-zoom-size) - (var(--item-size-diff) * 0.3));
    height: calc(var(--config-item-zoom-size) - (var(--item-size-diff) * 0.3));
  }

  &:hover {
    .weg-item {
      width: var(--config-item-zoom-size);
      height: var(--config-item-zoom-size);
    }

    + .weg-item-drag-container > .weg-item {
      width: calc(var(--config-item-zoom-size) - (var(--item-size-diff) * 0.3));
      height: calc(var(--config-item-zoom-size) - (var(--item-size-diff) * 0.3));
    }

    + .weg-item-drag-container + .weg-item-drag-container .weg-item {
      width: calc(var(--config-item-zoom-size) - (var(--item-size-diff) * 0.7));
      height: calc(var(--config-item-zoom-size) - (var(--item-size-diff) * 0.7));
    }
  }
}

.weg-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--config-item-size);
  height: var(--config-item-size);
  transition: width, height, 100ms cubic-bezier(0.25, 1, 0.5, 1);

  .bg-layer-1 {
    background-color: var(--color-gray-100);
    border-radius: 25%;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
  }

  &:active {
    .bg-layer-1 {
      filter: brightness(0.8);
    }

    .weg-item-icon,
    .weg-item-icon-start {
      transform: scale(0.8);
    }
  }

  &:not(:active) {
    .bg-layer-1 {
      transition: filter 0.2s linear;
    }

    .weg-item-icon,
    .weg-item-icon-start {
      transition: transform 0.2s linear;
    }
  }
}

.weg-item-icon {
  width: 65%;
  height: 65%;
  filter: drop-shadow(0px 0px 1px #0000009a);
  object-fit: contain;
  fill: var(--config-accent-lighter-color);
}

.weg-item-icon-start {
  width: 100%;
  height: 100%;
  filter: brightness(1.2);
  background: linear-gradient(150deg, var(--config-accent-color) 10%, #000 150%);
  mask-image: url('data:image/svg+xml;charset=utf-8,<svg width="100%" height="100%" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><mask id="mask"><rect width="100%" height="100%" fill="%23000"/><rect width="45%" height="45%" rx="12%" ry="12%" fill="%23fff"/><rect y="55%" width="45%" height="45%" rx="12%" ry="12%" fill="%23fff"/><rect x="55%" width="45%" height="45%" rx="12%" ry="12%" fill="%23fff"/><rect x="55%" y="55%" width="45%" height="45%" rx="12%" ry="12%" fill="%23fff"/></mask><rect width="100%" height="100%" mask="url(%23mask)" fill="%23fff"/></svg>');
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.weg-item-open-sign {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 6px;
  background-color: var(--color-gray-600);
  opacity: 0;
  transition-property: width, height, transform, opacity, background-color, border-radius;
  transition-duration: 0.2s;
  transition-timing-function: linear;

  .vertical & {
    transform: translateX(-50%);
  }

  .horizontal & {
    transform: translateY(-50%);
  }

  .top & {
    bottom: calc(100% + var(--config-padding) / 2);
  }

  .bottom & {
    top: calc(100% + var(--config-padding) / 2);
  }

  .left & {
    right: calc(100% + var(--config-padding) / 2);
  }

  .right & {
    left: calc(100% + var(--config-padding) / 2);
  }

  &.weg-item-open-sign-active {
    opacity: 1;
  }

  &.weg-item-open-sign-focused {
    background-color: var(--config-accent-color);

    .vertical & {
      height: 50%;
    }

    .horizontal & {
      width: 50%;
    }
  }
}

.weg-context-menu-container {
  padding: 3px;

  .menu-bg-layer-1 {
    background-color: var(--color-gray-100);
    border-radius: 10px;
  }

  .weg-context-menu {
    --empty-rule: "delete me on use";
  }

  .weg-context-menu-item-icon {
    width: 1em;
  }
}



.weg-item-preview-container {
  padding: 10px;
  border-radius: 10px;

  .preview-bg-layer-1 {
    background-color: var(--color-gray-100);
    border-radius: 10px;
  }
}

@keyframes PreviewContainerAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.weg-item-preview-container-open, .weg-context-menu-container-open,
.weg-item-preview-container-close, .weg-context-menu-container-close {
  animation: PreviewContainerAnimation 0.2s linear forwards; 
}

.weg-item-preview-container-close, .weg-context-menu-container-close {
  animation-direction: reverse;
}


.weg-item-preview {
  padding: 6px 10px 10px 10px;
  border-radius: 10px;
}

.weg-item-preview-topbar {
  margin: 0 0 8px 0;
}

.weg-item-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.weg-item-preview-close {
  --empty-rule: "delete me on use";
}

.weg-item-preview-image-container {
  border-radius: 10px;
  border: 1px solid var(--color-gray-300);
}

.weg-item-preview-image {
  --empty-rule: "delete me on use";
}

.weg-item-preview-spin {
  --empty-rule: "delete me on use";
}
